<div class="container">
  <span class="slider">
    <lv-slider
      [(ngModel)]="sliderValue"
      [lvRange]="true"
      [lvPoints]="points"
      [lvTooltip]="tipTemp"
      [lvMin]="0"
      [lvMax]="wholeDaySecond"
      [lvHoverShowTooltip]="true"
      (onChange)="onChange()"
      (onSlideEnd)="onSliderEnd($event)"
    >
      <ng-template #tipTemp let-data>{{ valueToTimeStr(data) }}</ng-template>
    </lv-slider>
  </span>
  <lv-time-picker [(ngModel)]="startTimeValue" (ngModelChange)="timeChange()" lvPlaceholder="HH:mm" [lvFormat]="'HH:mm'" (lvOpenChange)="openChange()"></lv-time-picker>
  <span class="separator">-</span>
  <lv-time-picker [(ngModel)]="endTimeValue" (ngModelChange)="timeChange()" lvPlaceholder="HH:mm" [lvFormat]="'HH:mm'" (lvOpenChange)="openChange()"></lv-time-picker>
</div>
